<template>
  <div class="app-container">
    <el-form label-width="120px">
      <el-form-item label="球队名称">
        <el-input v-model="team.name"/>
      </el-form-item>
      <el-form-item label="球队排名">
        <el-input-number v-model="team.groupRank" controls-position="right" min="0"/>
      </el-form-item>
      <el-form-item label="球队得分">
        <el-input v-model="team.score"/>
      </el-form-item>
      <el-form-item label="球队教练">
        <el-input v-model="team.coach"/>
      </el-form-item>

      <!-- 球队头像 -->
      <el-form-item label="球队图标">

        <!-- 头衔缩略图 -->
        <pan-thumb :image="team.avatar"/>
        <!-- 文件上传按钮 -->
        <el-button type="primary" icon="el-icon-upload" @click="imagecropperShow=true">更换图标
        </el-button>

        <!--
    v-show：是否显示上传组件
    :key：类似于id，如果一个页面多个图片上传控件，可以做区分
    :url：后台上传的url地址
    @close：关闭上传组件
    @crop-upload-success：上传成功后的回调 -->
        <image-cropper
          v-show="imagecropperShow"
          :width="300"
          :height="300"
          :key="imagecropperKey"
          :url="BASE_API+'/api/oss'"
          field="file"
          @close="close"
          @crop-upload-success="cropSuccess"/>

      </el-form-item>

      <el-form-item>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="save">添加</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  import ImageCropper from '@/components/ImageCropper'
  import PanThumb from '@/components/PanThumb'
  import team from '@/api/dbwork/team'
  export default {
    components: { ImageCropper, PanThumb },
    data(){
      return{
          team:{},
          imagecropperShow:false,
          imagecropperKey:0,
          BASE_API:process.env.BASE_API,
          saveBtnDisabled:false
      }
    },
    created() {
    },
    methods:{
      close(){
          this.imagecropperShow = false
      },
      cropSuccess(data){
          // 得到返回的地址
          this.team.avatar = data.url
          console.log(data.url)
          // 管弹窗
          this.imagecropperShow = false
      },
      save(){
          team.addTeam(this.team)
        .then(response=>{
          this.$message({
            type: 'success',
            message: '添加成功!'
          })
          this.$router.push({path:'/team/table'})
        })
      }
    }
  }
</script>
